<template>
  <div class="child-growth-statistics">
    <table border="1" width="100%">
      <thead>
      <tr>
        <th rowspan="2">年龄组</th>
        <th rowspan="2">应检人数</th>
        <th rowspan="2">实检人数</th>
        <th colspan="12">体重</th>
        <th colspan="12">身高</th>
      </tr>
      <tr>
        <!-- 体重 -->
        <th>上</th><th>%</th>
        <th>中上</th><th>%</th>
        <th>中+</th><th>%</th>
        <th>中-</th><th>%</th>
        <th>中下</th><th>%</th>
        <th>下</th><th>%</th>
        <!-- 身高 -->
        <th>上</th><th>%</th>
        <th>中上</th><th>%</th>
        <th>中+</th><th>%</th>
        <th>中-</th><th>%</th>
        <th>中下</th><th>%</th>
        <th>下</th><th>%</th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="(item, index) in data" :key="index">
        <td>{{ item.age }}</td>
        <td>{{ item.student_number }}</td>
        <td>{{ item.growth_number }}</td>
        <!-- 体重数据 -->
        <td>{{ item.weight6 }}</td><td>{{ item.weight_rebate6 }}</td>
        <td>{{ item.weight5 }}</td><td>{{ item.weight_rebate5 }}</td>
        <td>{{ item.weight4 }}</td><td>{{ item.weight_rebate4 }}</td>
        <td>{{ item.weight3 }}</td><td>{{ item.weight_rebate3 }}</td>
        <td>{{ item.weight2 }}</td><td>{{ item.weight_rebate2 }}</td>
        <td>{{ item.weight1 }}</td><td>{{ item.weight_rebate1 }}</td>
        <!-- 身高数据 -->
        <td>{{ item.height6 }}</td><td>{{ item.height_rebate6 }}</td>
        <td>{{ item.height5 }}</td><td>{{ item.height_rebate5 }}</td>
        <td>{{ item.height4 }}</td><td>{{ item.height_rebate4 }}</td>
        <td>{{ item.height3 }}</td><td>{{ item.height_rebate3 }}</td>
        <td>{{ item.height2 }}</td><td>{{ item.height_rebate2 }}</td>
        <td>{{ item.height1 }}</td><td>{{ item.height_rebate1 }}</td>
      </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  name: 'ChildGrowthStatistics',
  props: {
    data: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      // 默认值
      defaultData: [
        { age: '0岁-', student_number: 0, growth_number: 0, height1: 0, weight1: 0, unknown: 0 },
        { age: '1岁-', student_number: 0, growth_number: 0, height1: 0, weight1: 0, unknown: 0 },
        { age: '2岁-', student_number: 0, growth_number: 0, height1: 0, weight1: 0, unknown: 0 },
        { age: '3岁-', student_number: 31, growth_number: 25, height1: 0, weight1: 0, unknown: 0 },
        { age: '4岁-', student_number: 93, growth_number: 87, height1: 1, weight1: 0, unknown: 0 },
        { age: '5岁-', student_number: 53, growth_number: 50, height1: 0, weight1: 0, unknown: 0 },
        { age: '6岁-', student_number: 14, growth_number: 14, height1: 1, weight1: 1, unknown: 0 }
      ]
    };
  },
  mounted() {
    if (!this.data || this.data.length === 0) {
      this.$emit('update:data', this.defaultData);
    }
  }
};
</script>

<style scoped>
.child-growth-statistics {
  margin: 20px;
}

table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: center;
}

th {
  background-color: #f2f2f2;
}
</style>
